<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    </script>
    <style>
        #canvas {
            position: fixed;
            left: 0;
            top: 0;
            z-index: -1;
            width: 100vw !important;
            height: 100vh !important;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script type="module">
        import * as THREE from "./js/three.module.js";
        import { GLTFLoader } from "./js/GLTFLoader.js";
        import { ApiArCamera, ApiArKnow } from "../src/index.js"
        try {
            /* 开启摄像头 */
            let apiArCamera = await ApiArCamera(window.innerWidth, window.innerHeight)
            let threeInfo = {}
            threeInfo.canvas = document.querySelector("#canvas");
            /* 渲染器 */
            threeInfo.renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
                canvas: threeInfo.canvas,
                preserveDrawingBuffer: true,
                logarithmicDepthBuffer: true,
            });
            threeInfo.renderer.outputEncoding = THREE.sRGBEncoding;
            threeInfo.renderer.setPixelRatio(window.devicePixelRatio);
            threeInfo.renderer.setSize(window.innerWidth, window.innerHeight);
            /* 场景 */
            threeInfo.scene = new THREE.Scene();
            /* 相机 */
            const width = window.innerWidth;
            const height = window.innerHeight;
            const fov = (0.8 * 180) / Math.PI;
            const ratio = width / height;
            const near = 0.01;
            const far = 1000;
            threeInfo.camera = new THREE.PerspectiveCamera(fov, ratio, near, far);

            threeInfo.scene.add(threeInfo.camera);
            /* 环境光 */
            threeInfo.light = new THREE.AmbientLight(0xffffff);
            threeInfo.scene.add(threeInfo.light);
            /* 模型容器 */
            threeInfo.box = new THREE.Object3D();
            threeInfo.scene.add(threeInfo.box);
            /* 模型加载 */
            let threeGLTFLoader = new GLTFLoader();

            let gltf = await new Promise(resolve => {
                threeGLTFLoader.load("./resource/scene.gltf", (gltf) => {
                    resolve(gltf)
                });
            })
            threeInfo.model = gltf.scene
            threeInfo.box.add(threeInfo.model);
            let apiArKnow = await ApiArKnow({
                koneType: "image",
                markerUrl: "./resource/smoking_boy.png",
                cameraPara: "../src/data/camera_para.dat",
                threeRenderer: threeInfo.renderer,
                cameraOrigin: apiArCamera,
                rootModel: threeInfo.box,
                model: threeInfo.model,
                threeCamera: threeInfo.camera,
                threeScene: threeInfo.scene,
                threeModelScale: 50,
                threeModelPosition: {
                    x: 0,
                    y: -50,
                    z: 0
                },
                threeMatrix: false,
            })
            apiArKnow.on("loaded", (res) => {
                console.log("加载完成")
            })
            apiArKnow.on("found", (res) => {
                // console.log("识别到图片")
            })
            apiArKnow.on("notFound", (res) => {
                // console.log("未识别到图片")
            })
            let animate = function () {
                /* 旋转 */
                apiArKnow.update()
                threeInfo.renderer.render(threeInfo.scene, threeInfo.camera);
                threeInfo.animationId = requestAnimationFrame(animate);
            };

            animate();
        } catch (err) {
            console.log(err)
        }
    </script>
</body>

</html>